<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>10.react-列表渲染的一些高阶函数(接近真实开发模式)</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>

    <script type="text/babel">
      // 展示一个学生信息列表，筛选出总分高于 255 分的学生信息
      class FilterStudentList extends React.Component {
        constructor() {
          super()
          this.state = {
            fList: []
          }
        }

        getList() {
          return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest()
            xhr.open("GET", "./data/studentList.json", true)
            xhr.send()
            xhr.onload = function () {
              if (xhr.status === 200) {
                function isJSON(str) {
                  try {
                    JSON.parse(str)
                    return true
                  } catch (e) {
                    console.log(e)
                    return false
                  }
                }

                if (isJSON(xhr.responseText)) {
                  resolve(JSON.parse(xhr.responseText))
                } else {
                  reject("is not json")
                }
              } else {
                reject("请求失败。状态码为" + xhr.status)
              }
            }
          })
        }

        // 总分大于255分的学生
        async filterList() {
          const list = await this.getList()
          const result = list.filter((item) => item.total > 255)
          console.log(result, "filter")
          this.setState({
            fList: result
          })
        }

        render() {
          const { fList } = this.state
          return (
            <div>
              <button
                onClick={() => {
                  this.filterList()
                }}
              >
                选拔
              </button>
              {/* 循环渲染区域 */}
              <div>
                {/* 提一嘴下面👇🏻这样是不行的，因为里面是对象 */}
                {/* {fList} */}
                {fList.map((item) => (
                  <ul key={item.name}>
                    <li>{item ? "姓名：" + item.name : "无"}</li>
                    <li>{"语文：" + item.chinese}</li>
                    <li>{"数学：" + item.math}</li>
                    <li>{"英语：" + item.english}</li>
                    <li style={{ color: "red", fontWeight: "600" }}>
                      {"总分:" + item.total}
                    </li>
                  </ul>
                ))}
              </div>
            </div>
          )
        }
      }

      const root = ReactDOM.createRoot(document.getElementById("root"))
      root.render(<FilterStudentList />)
    </script>
  </body>
  <style>
    li {
      border-bottom: 1px solid;
      list-style: none;
    }
  </style>
</html>
